<!-- 权限配置 -->
<template>
  <div class="container-app row q-col-gutter-md">
    <RoleList class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-xs-12" :isShowCompany="isShowElements[0]" />
    <div class="col-xl-10 col-lg-10 col-md-9 col-sm-8 col-xs-12">
      <div class="row head">
        <q-separator vertical size="3px" class="leftLine bg-primary" />
        <span class="cursor-pointer q-ml-md name" :class="num === 0 ? 'text-primary' : ''"
          @click="changeStatus(0)">菜单权限</span>
        <span class="q-px-md" v-if="isShowElements[1].isShowPre">|</span>
        <span class="cursor-pointer name" v-if="isShowElements[1].isShowPre" :class="num === 1 ? 'text-primary' : ''"
          @click="changeStatus(1)">页面元素权限</span>
        <span v-if="isShowElements[2].isShowPre" class="q-px-md">|</span>
        <span class="cursor-pointer name " v-if="isShowElements[2].isShowPre" :class="num === 2 ? 'text-primary' : ''"
          @click="changeStatus(2)">功能权限</span>
        <q-icon size="20px" class="cursor-pointer q-ml-md" style="margin-top:15px;" color="primary" name="cached"
          @click="handlerRefresh" />
        <q-space />
        <q-btn flat round dense :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
          @click="toggleFullscreen" class="q-mr-sm" />
      </div>
      <div class="bg-white" id="asset_list" :class="IOSfull ? 'IOSfull' : ''">
        <div :class="rotate ? 'TableY' : $q.fullscreen.isActive ? 'Nrotate' : 'Nrotate2'">
          <PermissionMenu v-show="num === 0" ref="permissionMenu" />
        </div>
      </div>
      <PageElementPer v-if="isShowElements[1].isShowPre" v-show="num === 1" ref="pageElementPer" />
      <FunctionPre v-if="isShowElements[2].isShowPre" v-show="num === 2" ref="functionPre" />
    </div>
  </div>
</template>

<script>
import RoleList from './common/roleList'
import PermissionMenu from './common/permissionMenu'
import PageElementPer from './common/pageElementPer'
import FunctionPre from './common/functionPre'
import { gainPerEle } from 'src/api/permission'
import wetherScroll from 'src/components/mixins/wetherScroll.js'

export default {
  mixins: [wetherScroll],
  name: 'Permission',
  data() {
    return {
      num: 0,
      IOSfull: null,
      rotate: false,
      isShowElements: [
        {
          isShowPre: false,
          code: 801040001
        },
        {
          isShowPre: false,
          code: 801040002
        },
        {
          isShowPre: false,
          code: 801040003
        }
      ]
    };
  },

  components: {
    RoleList,
    PermissionMenu,
    PageElementPer,
    FunctionPre
  },

  computed: {},
  watch: {
    // 查询页面元素显示权限
    $route: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.path === '/permission') {
          this.resetShowElement()
          this.getPremissionElement({ page_url: '/permission' })
        }
      }
    },
    '$q.fullscreen.isActive'(val) {
      this.$route.path == '/permission' && this.device == 'mobile' ? this.rotate = val : this.rotate = false;
      if (this.rotate) {
        this.wetherScroll();
      } else {
        this.removeWetherScroll();
      }
    },
  },

  mounted() { },

  methods: {
    // 切换tab
    changeStatus(num) {
      this.num = num
    },
    // 刷新
    handlerRefresh() {
      this.$refs.permissionMenu.getMenu()
      this.$refs.pageElementPer.getPageElement()
      this.$refs.functionPre.getFunctionPre()
    },
    /**
     * 重置isShowElements
     */
    resetShowElement() {
      this.isShowElements = [
        {
          isShowPre: false,
          code: 801040001
        },
        {
          isShowPre: false,
          code: 801040002
        },
        {
          isShowPre: false,
          code: 801040003
        }
      ]
    },
    /**
     * 判断页面元素显示的权限
     */
    getPremissionElement(pageUrl) {
      gainPerEle(pageUrl).then(res => {
        const { status, data } = res
        if (status === 200) {
          this.permissionElement = data
          if (data && data.length > 0) {
            data.forEach(element => {
              this.isShowElements.forEach(item => {
                if (element.code === item.code) {
                  item.isShowPre = true
                }
              })
            })
          }
        }
      })
    },
    /**
     * 全屏
     */
    toggleFullscreen() {
      this.$nextTick(_ => {
        let dom = document.getElementById('asset_list')
        let nav = window.navigator
        let ua = nav.userAgent

        if (/iPhone|iPod|iPad/.test(ua)) {
          this.IOSfull = !this.IOSfull
          let con = document.getElementsByClassName('container-app')
          if (this.IOSfull) {
            dom.style.width = window.innerHeight + 'px'
            con[0].style.padding = '0px'
          } else {
            dom.style.width = ''
            con[0].style.padding = '30px'
          }
        } else {
          this.$q.fullscreen.toggle(dom).then(_ => {
          }).catch(error => {
            console.log(error)
          })
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
